<template>
  <div>
    <query-form-card
      ref="queryFormCard"
      :dashboard="dashboard"
      is-trade-query-form
      @query="onQuery"
    />

    <el-card
      :shadow="dashboard ? 'hover' : 'never'"
      body-style="height:100%;padding:0px;"
      style="height:100%"
    >
      <div ref="chartContainer" v-loading="loading"></div>
    </el-card>
  </div>
</template>

<script>
import QueryFormCard from './QueryFormCard';
import { setNoDataTip } from './chart-utils';
import echarts from 'echarts';

export default {
  components: {
    QueryFormCard
  },
  props: {
    dashboard: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      refreshing: false,
      loading: false
    }
  },
  watch: {
    visible() {
      this.resize();
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    const onResize = this.resize.bind(this);
    onResize();
    window.addEventListener('resize', onResize);
    app.$refs.navMenu.$on('collapse-change', onResize);
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', onResize);
      app.$refs.navMenu && app.$refs.navMenu.$off('collapse-change', onResize);
    });
  },
  methods: {
    dashboardRefresh() {
      this.$refs.queryFormCard.queryForInit();
    },
    onQuery(params) {
      this.query(params);
    },
    async query(params) {
      if (!this.refreshing) {
        this.loading = true;
      }
      const data = await this.$http.get('/api/shop/stat/queryProvidersAccountStats', {params});
      this.chart.clear();
      let hasChanges = !(this.oldData && _.isEqual(this.oldData[this.oldData.length - 1], data[data.length - 1]));
      this.oldData = data;
      this.loading = false;

      if (!data.length) {
        if (this.dashboard) {
          setNoDataTip(this.$refs.chartContainer, '最近15天没有交易');
        } else {
          this.$message.warning('未查询到数据');
        }
        return;
      }
      this.$emit('query', data);

      var dates = data.map(({statDate}) =>
       statDate.split('-').map(s => s[0] == '0' ? s.substring(1) : s).join('-'));

      this.chart.setOption({
        grid: {
          x: {day: 50, month: 64, year: 70}[params.timeUnit],
          y: 50,
          x2: {day: 50, month: 64, year: 70}[params.timeUnit],
          y2: 46
        },
        legend: {
          top: 14,
          left: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          show: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#303133',
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          data: dates
        }],
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#303133',
            interval: 0
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#fafafa'
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999"
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)','rgba(240,240,240,0.3)']
            }
          }
        }, {
          type: 'value',
          nameTextStyle: {
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#303133',
            interval: 0
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#fafafa'
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999"
            },
          }
        }],
        series: [{
          name: {3: '销售额', 4: '充值额'}[params.tradeType],
          color: '#FF005A',
          type:'line',
          smooth: true,
          symbolSize: 4,
          yAxisIndex: 0,
          lineStyle: {
            normal: {
              width: 2.2,
              color: '#FF005A',
              shadowColor: 'rgba(0,0,0, 0.1)',
              shadowBlur: 10,
              shadowOffsetY: 7,
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                fontSize: 14
              }
            }
          },
          areaStyle: {
            color: 'rgba(255, 0, 90, 0.06)'
          },
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          data: data.map(item => params.tradeType == 3 ? item.income : item.tradePrice).map(x => x.toFixed(2))
        }, {
          name: '交易数',
          color: '#3888fa',
          type: 'line',
          smooth: true,
          symbolSize: 4,
          yAxisIndex: 1,
          lineStyle: {
            normal: {
              width: 2.2,
              color: '#3888fa',
              shadowColor: 'rgba(0,0,0, 0.1)',
              shadowBlur: 10,
              shadowOffsetY: 7,
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                fontSize: 14
              }
            }
          },
          areaStyle: {
            color: 'rgba(56, 136, 250, 0.06)'
          },
          data: data.map(item => item.tradeAmount)
        }],
        animation: hasChanges || !this.refreshing
      });

      if (this.dashboard && !this.refreshing) {
        this.refreshing = true;
      }
    },
    resize() {
      const { chartContainer } = this.$refs;
      if (this.visible && chartContainer) {
        chartContainer.style.height = chartContainer.parentElement.parentElement.offsetHeight + 'px';
        this.chart.resize();
      }
    }
  }
}
</script>